<template>
  <div class="main">
    <!-- <h1>我是App.vue</h1>
    <hr />
    <HmA></HmA> -->
    <HmTop></HmTop>
    <HmMiddle></HmMiddle>
    <HmBottom></HmBottom>
    <HmAaa></HmAaa>
  </div>
</template>
<script>
/*
组件套用组件三步曲：
1：导入   import 名字 from '路径'
2：注册   components:{ 标签名:名字  }
3：当标签使用   <标签名 />
注意点：标签名最好大写  不要与原生标签同名
*/

// import HmA from './components/HmA.vue'
import HmTop from './components/HmTop.vue'
import HmMiddle from './components/HmMiddle.vue'
import HmBottom from './components/HmBottom.vue'
import HmAaa from './components/HmAaa.vue'
export default {
  components: {
    // HmA
    HmTop,
    HmMiddle,
    HmBottom,
    HmAaa
  }
}
</script>
<style>
.main {
  width: 800px;
  margin: 0 auto;
}
img {
  width: 800px;
}
</style>
